<template>
    <div class="set-container">
        <div class="set-options">
            <n-button class="nbtn" strong dashed color="#43cc00" @click="changeOption('systemConfig')">系统配置{{ useSystemConfig.setPage == 'systemConfig' ? '√' : '' }}</n-button>
            <n-button class="nbtn" strong dashed color="#77773c" @click="changeOption('keyboardListen')">全局热键{{ useSystemConfig.setPage == 'keyboardListen' ? '√' : '' }}</n-button>
            <n-button class="nbtn" strong dashed color="#00aaff" @click="changeOption('createAudio')">制作铃声{{ useSystemConfig.setPage == 'createAudio' ? '√' : '' }}</n-button>
            <n-button class="nbtn" strong dashed color="#8a2be2" @click="changeOption('createLyrics')">制作歌词{{ useSystemConfig.setPage == 'createLyrics' ? '√' : '' }}</n-button>
            <n-button v-if="userInfo.roles == 'admin' || userInfo.roles == 'root'" class="nbtn" strong dashed color="#ff1a66" @click="changeOption('uploadAudio')">上传音乐{{ useSystemConfig.setPage == 'uploadAudio' ? '√' : '' }}</n-button>
            <n-button v-if="userInfo.roles == 'admin' || userInfo.roles == 'root'" class="nbtn" strong dashed color="#5c8a8a" @click="changeOption('backgroundManagement')">后台管理{{ useSystemConfig.setPage == 'backgroundManagement' ? '√' : '' }}</n-button>
            <n-button class="nbtn" strong dashed color="#e68a00" @click="changeOption('thanksAuthor')">鸣谢制作{{ useSystemConfig.setPage == 'thanksAuthor' ? '√' : '' }}</n-button>
        </div>
        <div class="set-content">
            <n-scrollbar style="max-height: calc(100vh - 250px);">
                <router-view></router-view>
            </n-scrollbar>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import { useRouter } from 'vue-router';
import { userInfoStore, useSystemConfigStore } from '../store/index';

const router = useRouter()
const useSystemConfig = useSystemConfigStore()
const userInfo = userInfoStore()

const changeOption = (key: string) => {
    useSystemConfig.changeSetPage(key)
    router.replace({ name: key })
}

</script>
    
<style scoped lang="less">
.set-container {
    display: flex;
    flex-wrap: wrap;
    width: 100vw;

    .set-options {
        display: flex;
        width: 100%;
        height: 60px;
        justify-content: flex-start;
        margin-top: 30px;

        .nbtn {
            margin-right: 20px;

            &:nth-child(1) {
                margin-left: 25px;
            }
        }

    }

    .set-content {
        width: 100%;
        height: calc(100vh - 170px);
        padding-left: 20px;
        padding-right: 20px;
    }
}
</style>